<template>
  <a-drawer
    title="自定义筛选字段"
    :maskClosable="true"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 450"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
      paddingBottom: '80px',
    }"
    @close="closeModal"
  >
    <a-alert message="拖拽条目进行排序" type="info" closable class="mb-20" />
    <draggable v-model="sortList" item-key="order">
      <template #item="{ element }">
        <li class="list-group-item">
          <a-checkbox size="large" v-model:checked="element.show"></a-checkbox>
          <span class="title">{{ element.title }}</span>
        </li>
      </template>
    </draggable>

    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { message } from "ant-design-vue";
import { computed, defineComponent, ref, toRaw, watch } from "vue";
import draggable from "vuedraggable";
import store from "../../../../store";

export default defineComponent({
  name: "SearchSetting",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    source: {
      type: Number,
      default: 1,
    },
  },
  components: { draggable },
  setup(props, context) {
    const closeModal = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      store
        .dispatch("SetSearchSettingList", {
          type: "arr",
          data: sortList.value,
          source: props.source == 1 ? "contract" : "bill",
        })
        .then(() => {
          message.success("操作成功！");
          context.emit("success");
        });
    };
    const sortList = ref([]);
    const dragOptions = computed(() => {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    });
    const drag = ref(false);

    const init = () => {
      if (props.source == 1) {
        sortList.value = toRaw(store.getters.searchSettingList);
      }
      if (props.source == 2) {
        sortList.value = store.getters.billSettingList;
      }
    };
    const reset = () => {};
    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      sortList,
      dragOptions,
      drag,
      closeModal,
      onSubmit,
    };
  },
});
</script>
<style lang="less" scoped>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: @primary-color-bg;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #f4f4f4;
  padding: 20px;
  font-size: 16px;
  .title {
    margin-left: 20px;
  }
}
</style>
